<template>
  <el-switch
    v-model="darkMode"
    inline-prompt
    :active-icon="Moon"
    :inactive-icon="Sunny"
    @change="toggleDark()"
  />
</template>

<script setup lang="ts">
  import { useDark, useToggle } from '@vueuse/core'
  import { Moon, Sunny } from '@element-plus/icons-vue'

  const darkMode = computed(() => {
    return isDark.value
  })

  const isDark = useDark({
    storageKey: 'theme-choose', // 持久化键名（默认 'vueuse-color-scheme'）
    valueDark: 'dark', // 暗黑模式类名
    valueLight: 'light', // 明亮模式类名:cite[3]:cite[5]:cite[7]
  })
  const toggleDark = useToggle(isDark)
</script>
